<template>
  <div class="footer">
    <div v-if="btn==='test'" class="addUnfamiliar" >返回首页</div>
    <div class="test">
      <div class="startTest">开始测试</div>
      <div class="testlist">
        <router-link class="testitem"
        :to="{path:'/courses/mated',query:{name: this.$route.query.name ,index:this.$route.query.index}}">
        中英连连看
        <i class="iconfont fullstar" v-if="this.mate===1">&#xe86a;</i>
        </router-link>

        <router-link class="testitem"
        :to="{path:'/courses/write',query:{name: this.$route.query.name ,index:this.$route.query.index}}">
        英文回想
        <i class="iconfont fullstar" v-if="this.write===1">&#xe86a;</i>
        </router-link>

        <router-link class="testitem"
        :to="{path:'/courses/dictation',query:{name: this.$route.query.name ,index:this.$route.query.index}}">
        听写电台
        <i class="iconfont fullstar" v-if="this.dictation===1">&#xe86a;</i>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import store from '@/store'
export default {
  name: 'courses-footer',
  // prop传值改变底部栏选项
  props: {
    btn: String
  },
  data () {
    return {
      mate: '',
      dictation: '',
      write: ''
    }
  },
  created () {
    const starmsg = store.state.courses.starMsg
    this.mate = starmsg.mateScore
    this.dictation = starmsg.dictationScore
    this.write = starmsg.writeScore
    // console.log(starmsg)
  }
}
</script>
<style scoped lang="less">
.footer{
  position: absolute;
  top: 580px;
  height: 60px;
  width: 800px;
  background-color: rgba(201, 201, 201,0.6);
  border-radius: 0px 0px 5px 5px;
  .addUnfamiliar{
    cursor: pointer;
    text-align: center;
    border-radius: 8%;
    margin-left: 50px;
    margin-top: 8px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid rgb(201, 201, 201);
    float: left;
  }
  .test{
    float: right;
    .testlist{
      height: 90px;
      width: 122px;
      border-bottom: none;
      display: none;
      position: relative;
      bottom: 130px;
      &:hover{
        display: block;
      }
    }
    .testitem{
      margin: 0 auto;
      background-color: #e8e8e8;
      color: #64b62f;
      display: block;
      list-style: none;
      height: 30px;
      width: 120px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      opacity: 0.8;
      transition: opacity 0.3s ease;
      &:hover{
        width: 120px;
        border-radius: 10px;
        transform: scale(1.1);
        background: #bcfa93;
        color: white;
        opacity: 1;
      }
    }
  }
  .startTest:hover +.testlist{
    display: block;
  }
  .startTest{
    cursor: pointer;
    text-align: center;
    border-radius:10px;
    margin-right: 50px;
    margin-top: 8px;
    width: 122px;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #64b62f;
  }
  .fullstar{
    color: rgba(255, 174, 0, 0.893);
    position: absolute;
    right:0px;
  }
}

</style>
